<template>
  <li :id="itemprop.id">
    <div class="menuitem"  @click="open_sub_menu(itemprop.id)">
      <i class="fa fa-cube"  aria-hidden="true"></i>
      <span style="margin-left:10px"> {{itemprop.name}} </span>
      <i
        :class="styleArry"
        style="position: absolute; top: 40%; right: 20px"
        aria-hidden="true"
      ></i>
    </div>
    <ul v-if="isopen">
      <li class="menuitem"
       v-for="sub_item in memu_list"  
       :key="sub_item.id" 
       style="padding-left: 68px"  
       @click="Link_to_content(sub_item)"
       >
       {{sub_item.name}}
       </li>
    </ul>
  </li>
</template>
<script>
export default {
  name: "SidebarList",
  data(){
    return {
      isopen:false,
      styleArry:["fa","fa-angle-down"],
      memu_list:[
        {id:"01",name:"设备管理",menuurl:"Assetslist"},//示例数据
        {id:"02",name:"工作管理",menuurl:"Assetsset"},
        {id:"03",name:"工作管理1",menuurl:"Assetsset1"},
        {id:"04",name:"工作管理2",menuurl:"Assetsset2"}
      ]
    }
  },
  methods:{
    //绑定事件 contentbox的正文部分路由到对应的组件上，同时将路径加入到vuex的content_Tab中
    Link_to_content(obj){
      let dos_have=-1;
      dos_have=this.$store.state.content_Tab.indexOf(obj);//判断是否存在数组中
      if(dos_have<0){
        this.$store.dispatch("Add_teb",obj);
      }
      if(this.$route.name!==obj.menuurl){//检测路由是否重复提交
      this.$router.push({name:obj.menuurl});
      }
      this.$store.dispatch("UpdateActive",obj);
    },
    open_sub_menu(id){
      //此处点击后开始借助vuex初始化菜单列表 如果vuex中没有菜单，则调ajax请求菜单。如果有，则取vuex
      if(!this.isopen){
        console.log("do something get menulist for "+id);
        this.styleArry=["fa","fa-angle-down","isopened"]
      }else{
        this.styleArry=["fa","fa-angle-down"]
      }
      this.isopen=!this.isopen;
    }
  },
  computed:{
    isactive(){
      return this.isopen?{display:"block"}:{display:"none"}
    }
  },
  props:["itemprop"],
  components: {},
};
</script>
<style>

</style>